<template>
    <div class="sku">
        <el-dialog v-model="show" title="编辑商品信息" width="30%" :before-close="handleClose">
            <el-form>
                <el-form-item label="商品货号">
                    <el-input placeholder="按SKU编号搜索">
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" border>
                <el-table-column prop="skuCode" label="SKU编号" />
                <el-table-column prop="price" label="销售价格" />
                <el-table-column prop="sale" label="商品库存" />
                <el-table-column prop="stock" label="库存预警值" />
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="emit('hide')">取消</el-button>
                    <el-button type="primary" @click="sureFn">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>

</template>

<script setup lang="ts">
import { pro } from '@/api';
import { Search } from '@element-plus/icons-vue'
import { reactive, watch } from 'vue';
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    data: {
        type: Number,
        default: 0
    }
})
const emit = defineEmits(['hide'])
const tableData = reactive<ISKUListModel[]>([])
// 请求
console.log('data', props.data);
watch(() => props.data, () => {
    if (props.data === 0) return;
    pro.queryIDSKUApi({ pid: props.data }).then(res => {
        console.log('sku', res.data);
        Object.assign(tableData, res.data)
    })
})
const handleClose = () => {
    emit('hide')
}

const sureFn = () => {
    emit('hide')
}

</script>

<style scoped lang="less">
.sku {
    :deep(.el-dialog) {
        width: 600px;
    }
}
</style>
